<template>
  <div class="home">
    <div
      v-show="gotop"
      class="gotop"
      @click="toTop"
    >
      <i class="fa-arrow-up fa" />
    </div>
    <div class="header">
      <div
        class="address_map"
        @click="$router.push({name: 'address',params: {city: city}})"
      >
        <i class="fa fa-map-marker" />
        <span>{{ address }}</span>
        <i class="fa fa-sort-desc" />
      </div>
    </div>
    <Sticky>
      <div
        class="search_wrap"
        :class="{'fixedview':showFilter}"
        @click="$router.push('/search')"
      >
        <div class="shop_search">
          <i class="fa fa-search" />
          搜索商家 商家名称
        </div>
      </div>
    </Sticky>
    <div id="container">
      <!-- 轮播 -->
      <swipe
        class="swiper"
        :autoplay="3000"
        indicator-color="white"
      >
        <swipe-item
          v-for="(img,index) in swipeImgs"
          :key="index"
        >
          <img
            v-lazy="img"
            alt="首页轮播"
          >
        </swipe-item>
      </swipe>
      <!-- 分类 -->
      <swipe
        :auto="0"
        class="entries"
        indicator-color="#999"
      >
        <swipe-item
          v-for="(entry,i) in entries"
          :key="i"
          class="entry_wrap"
        >
          <div
            v-for="(item,index) in entry"
            :key="index"
            class="foodentry"
          >
            <div class="img_wrap">
              <img
                v-lazy="item.image"
                alt
              >
            </div>
            <span>{{ item.name }}</span>
          </div>
        </swipe-item>
      </swipe>
    </div>
    <!-- 推荐商家 -->
    <div class="shoplist-title">推荐商家</div>
    <!-- 导航 -->
    <Sticky :offset-top="54">
      <FilterView
        :filter-data="filterData"
        @searchFixed="showFilterView"
        @update="update"
      />
    </Sticky>
    <!-- 商家信息 -->
    <pull-refresh
      v-model="refreshing"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <List
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        offset="10"
        @load="loadData"
      >
        <div class="shoplist">
          <IndexShop
            v-for="(item,index) in restaurants"
            :key="index"
            :restaurant="item.restaurant"
          />
        </div>
      </List>
    </pull-refresh>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { Swipe, SwipeItem, Toast, List, PullRefresh, Sticky } from 'vant'
import FilterView from '../components/FilterView'
import IndexShop from '../components/IndexShop'
export default {
  name: 'Home',
  components: {
    FilterView,
    IndexShop,
    Swipe,
    SwipeItem,
    List,
    PullRefresh,
    Sticky
  },
  data() {
    return {
      swipeImgs: [],
      gotop: false,
      entries: [],
      filterData: null,
      error: false,
      showFilter: false,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      size: 5,
      restaurants: [], // 存放所有商家容器
      data: null
    }
  },
  computed: {
    address() {
      return this.$store.getters.address
    },
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      )
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    // 滚动获取top
    handleScroll() {
      const scrolltop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false)
    },
    // 返回顶部
    toTop() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.loadData()
    },
    // 加载数据
    getData() {
      this.$axios(
        'https://www.fastmock.site/mock/cab80e667fc295aa088c1da19973bb87/ele/shoppoing2'
      ).then(res => {
        this.swipeImgs = res.data.swipeImgs
        this.entries = res.data.entries
      })
      this.$axios(
        'https://www.fastmock.site/mock/cab80e667fc295aa088c1da19973bb87/ele/filter'
      ).then(res => {
        this.filterData = res.data
      })
    },
    showFilterView(isShow) {
      this.showFilter = isShow
    },
    // 筛选更新
    update(condation) {
      console.log(condation)
      this.page = 1
      this.data = condation
      this.restaurants = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.loadData()
    },
    // 列表加载数据
    loadData() {
      // 拉取商家信息
      if (this.refreshing) {
        this.restaurants = []
        this.page = 1
        this.refreshing = false
      }
      if (this.page >= 2) {
        this.finished = true
        console.log('true')
      } else {
        this.finished = false
        console.log('fa')
      }
      console.log(
        '加载' + 'page:' + this.page + 'psize:' + this.size,
        'data' + this.data
      )
      // 异步更新数据
      this.$axios
        .post(
          'https://www.fastmock.site/mock/cab80e667fc295aa088c1da19973bb87/ele/restaurants'
        )
        .then(res => {
          // 加载状态结束
          this.loading = false
          this.page++
          this.restaurants = this.restaurants.concat(res.data.items)
          console.log(this.restaurants)
        })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          this.error = true
          this.loading = false
          // 将error设置成true即可显示错误提示，用户点击错误提示后会重新触发 load 事件。
        })
    }
  }
}
</script>
<style scoped>
.gotop {
  position: fixed;
  right: 4vw;
  bottom: 13vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.333333vw;
  height: 11.333333vw;
  border: 1px solid #999;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.3s;
  will-change: transform;
  z-index: 9;
  color: #999;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.home {
  width: 100%;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.header,
.search_wrap {
  background-color: #009eef;
  padding: 10px 16px;
}
.header .address_map {
  color: #fff;
  font-weight: bold;
}
.address_map i {
  margin: 0 3px;
  font-size: 18px;
}
.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search_wrap .shop_search {
  background-color: #fff;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}
.search_wrap {
  position: sticky;
  top: 0px;
  z-index: 999;
  box-sizing: border-box;
}
.swiper {
  height: 40vw;
}
.swiper img {
  width: 100%;
  object-fit: fill;
  height: 40vw;
}
.entries {
  background: #fff;
  height: 47.2vw;
  text-align: center;
  overflow: hidden;
}
.foodentry {
  width: 20%;
  float: left;
  position: relative;
  margin-top: 2.933333vw;
}
.foodentry .img_wrap {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 12vw;
}
.img_wrap img {
  width: 100%;
  height: 100%;
}
.foodentry span {
  display: block;
  color: #666;
  font-size: 0.32rem;
}
/* 推荐商家 */
.shoplist-title {
  display: flex;
  align-items: flex;
  justify-content: center;
  height: 9.6vw;
  line-height: 9.6vw;
  font-size: 16px;
  color: #333;
  background: #fff;
}
.shoplist-title:after,
.shoplist-title:before {
  display: block;
  content: "一";
  width: 5.333333vw;
  height: 0.266667vw;
  color: #999;
}
.shoplist-title:before {
  margin-right: 3.466667vw;
}
.shoplist-title:after {
  margin-left: 3.466667vw;
}
.fixedview {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 999;
}
/* .van-pull-refresh {
  height: calc(100% - 95px);
  overflow: auto;
} */
</style>
